import React from 'react';
import { Icon, Tooltip } from 'antd';
import { IconProps } from 'antd/lib/icon';
import styles from './index.less';

export interface InfoIconProps extends IconProps {
    children?: string;
}

const InfoIcon = ({ title, children, ...rest }: InfoIconProps) => (
    <div style={{ display: 'inline-flex', alignItems: 'center' }}>
        {children}
        <Tooltip title={title || ''}>
            <Icon type="info-circle" className={styles.infoIcon} style={{ marginLeft: 4, marginRight: 2 }} {...rest} />
        </Tooltip>
    </div>
);

export default InfoIcon;
